<template>
  <div>
    <h1>Create an Blog</h1>
    <form @submit.prevent="createBlog">
      <BaseSelect
        label="Select a category"
        v-model="blogpost.category"
        :options="categories"
        class="field"
      />
      <h3>Name & describe your blog</h3>
      <BaseInput
        label="title"
        v-model="blogpost.title"
        type="text"
        placeholder="Add a blog title"
        class="field"
      />
      <div class="field">
        <label>Description</label>
        <textarea
          placeholder="Add a description"
          v-model="blogpost.description"
        />
      </div>
      <h3>When did you write your blog?</h3>
      <div class="field">
        <label>Date</label>
        <datepicker placeholder="Select a date" v-model="blogpost.date" />
      </div>
      <BaseSelect
        label="Select a time"
        v-model="blogpost.time"
        :options="times"
        class="field"
      />
      <BaseButton type="submit" buttonClass="-fill-gradient">Submit</BaseButton>
    </form>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";
import NProgress from "nprogress";

export default {
  components: {
    Datepicker,
  },
  data() {
    const times = [];
    for (let i = 1; i <= 24; i++) {
      times.push(i + ":00");
    }
    return {
      times,
      blogpost: this.createFreshBlogObject(),
      categories: this.$store.state.categories,
    };
  },
  methods: {
    createBlog() {
      NProgress.start();
      this.$store
        .dispatch("blogpost/createBlog", this.blogpost)
        .then(() => {
          this.$router.push({
            name: "blog-show",
            params: { id: this.$store.state.blogpost.id },
          });
          this.blogpost = this.createFreshBlogObject();
        })
        .catch(() => {
          NProgress.done();
        });
    },
    createFreshBlogObject() {
      const user = this.$store.state.user.user;
      // 1.module name 2. state
      // const id = Math.floor(Math.random() * 10000000);
      return {
        user: user,
        // id: id,
        category: "",
        title: "",
        description: "",
        date: "",
        time: "",
      };
    },
  },
};
</script>

<style scoped>
button,
label,
input,
optgroup,
select,
textarea {
  display: inline-flex;
  font-family: "Open sans", sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 2px solid #39b982;
}
label {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 700;
}
input,
textarea {
  box-sizing: border-box;
  border: solid 1px rgba(0, 0, 0, 0.4);
}
textarea {
  width: 100%;
  overflow: auto;
  font-size: 20px;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
[type="text"],
[type="number"],
[type="search"],
[type="password"] {
  height: 52px;
  width: 100%;
  padding: 0 10px;
  font-size: 20px;
}
[type="text"]:focus,
[type="number"]:focus,
[type="search"]:focus,
[type="password"]:focus {
  border-color: #39b982;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
[hidden] {
  display: none;
}
.error {
  border: 1px solid red;
}
.errorMessage {
  color: red;
}
select {
  width: 100%;
  height: 52px;
  padding: 0 24px 0 10px;
  vertical-align: middle;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 8px 10px;
  border: solid 1px rgba(0, 0, 0, 0.4);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select:focus {
  border-color: #39b982;
  outline: 0;
}
select:focus::ms-value {
  color: #000;
  background: #fff;
}
select::ms-expand {
  opacity: 0;
}

.field {
  margin-bottom: 24px;
}
</style>
